<script setup lang="ts">
    import { ref } from 'vue'
    import { timeRanges } from '@/utils/index'

    const waifuRef = ref()
    const tipsRef = ref()
    const liveRef = ref()

    const change = () => {
        waifuRef.value.classList.toggle('waifu-toggle-active')
        tipsRef.value.classList.toggle('tips')
        liveRef.value.classList.toggle('live2d')
    }
</script>

<template>
  <div id="waifu-toggle" class="waifu-toggle-active" ref="waifuRef" @click="change">
    <div id="waifu-tips" ref="tipsRef" class="">
        <h3>Tia酱提示您注意, 打卡时段~</h3>
        <ul>
            <li v-for="(item,index) in timeRanges" :key="index">{{ item.s }} - {{ item.e }}</li>
        </ul>
    </div>
    <div id="live2d" ref="liveRef"><img src="./../assets/kanbanniang.png" alt=""></div>
    <span>看板娘</span>
</div>
</template>

<style scoped>
#waifu-toggle{
    z-index: 9999;
}
#live2d{
    position: absolute;
    width: 200px;
    height: 200px;
    left: -200px;
}
.live2d{
    left: 230px !important;
    bottom: -70px;
}
.tips{
    left: 90px;
    bottom: 0;
    opacity: 1 !important;
    transition: 1s linear;
    writing-mode:initial;
    color: #000;
}
</style>
